<template>
	<div class="container-wrap">
		<div class="card signin-card">
			<div class="title-wrap">
				<span class="title">{{ groupName }}</span>
			</div>

			<div class="content">
				<div class="form-group">
					<span class="tip">
						{{ $t('are_you_sure_to_join_this_group') }}
					</span>

					<input type="password" v-model="passwd" :placeholder="$t('password')">
				</div>

				<span v-show="tips" class="worn-tips">{{ tips }}</span>

				<br>

				<button class="btn btn-primary submit" @click="join(passwd)">{{ $t('join') }}</button>
			</div>
		</div>
	</div>
</template>

<script type="module">
import { GroupService } from '@/common/common.object'

export default {
	data() {
		return {
			groupId: null,
			groupName: null,
			passwd: null,

			tips: null,
		};
	},
	created() {
		this.groupId = this.$route.params.groupId;
		this.groupName = this.$route.query.name;

		this.$changeTitle(" {{ join_group }} - " + this.groupName);
	},
	methods: {
		join(passwd) {
			GroupService.join(this.groupId, this.passwd).then(result => {
				console.log("join result: ", result);
				// todo show success
				// setTimeout(this.$toPage(GroupService.getUrl(this.groupId)), 800);
			}, error => {
				this.tips = error;
			});
		}
	}
}
</script>

<style scoped>
.container-wrap {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 使容器高度占满视口高度，仅作示例 */
	
	background-color: #EEEEEE;
}

.signin-card {
	margin: 0 auto;
	padding: 32px;
	width: 380px;

	background-color: white;

	box-sizing: border-box;
}


.signin-card>.title-wrap {
	margin-bottom: 30px;
	text-align: center;

	font-size: 18px;
}



.signin-card>.content>.form-group>.tip {
	display: block;

	margin-bottom: 12px;
}


.signin-card>.content>.form-group>input,
.signin-card>.content>.submit {
	width: 100%;
	height: 40px;
}


.signin-card>.content>.form-group>input {
	padding: 0px 16px;
	width: 100%;

	color: #555555;
	font-size: 16px;

	outline: none;
	vertical-align: middle;

	border-radius: 3px;
	border: 1px solid #DCDEE0;
	box-sizing: border-box;
}
</style>
